<script setup lang="ts">
import PanelGroup from './components/PanelGroup.vue'
import { ElRow, ElCol, ElCard, ElSkeleton } from 'element-plus'
import { Echart } from '@/components/Echart'
import { pieOptions, barOptions, lineOptions,myOptions } from '../echarts-data'
import { ref, reactive } from 'vue'
import { getCourseshoucangDate,getselFeedBackNums,getselFeedEcharts } from '@/api/fankuijilu'
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { useI18n } from '@/hooks/web/useI18n'
import { Search } from '@/components/Search'
import { FormSchema } from '@/types/form'

//t代表国际化
const { t } = useI18n()
//这个如果为true加载的时候会转圈
const loading = ref(true)

const myOptionData = reactive<EChartsOption>(myOptions) as EChartsOption

let shiping = ref({
  dataA:0,
  dataB:0,
  dataC:0,
  dataD:0,
});
let shangping = ref({
  dataA:0,
  dataB:0,
  dataC:0,
  dataD:0,
});
let shuju = ref<object>({
  dataA:0,
  dataB:0,
  dataC:0,
  dataD:0,
});
let qita = ref({
  dataA:0,
  dataB:0,
  dataC:0,
  dataD:0,
});

const getDianzan = async () => {
  const res = await getselFeedBackNums().catch(() => {})
  shuju.value = res.data
}

const setVideoData2 = async (a) => {
  const res = await getCourseshoucangDate(a).catch(() => {})
  shiping.value = res.data
}

const setVideoData3 = async (a) => {
  const res = await getCourseshoucangDate(a).catch(() => {})
  shangping.value = res.data
}

const setVideoData4 = async (a) => {
  const res = await getCourseshoucangDate(a).catch(() => {})
  qita.value = res.data
  getMonthlySales();
}

const getMonthlySales = () => {
  set(
          myOptionData,
          'xAxis.data',
          ['很好','好','一般','差']
  )
  set(myOptionData, 'series', [
    {
      name: '视频反馈',
      smooth: true,
      type: 'line',
      data: [shiping.value.dataA,shiping.value.dataB,shiping.value.dataC,shiping.value.dataD],
      animationDuration: 2800,
      animationEasing: 'cubicInOut'
    },
    {
      name: '商品反馈',
      smooth: true,
      type: 'line',
      itemStyle: {},
      data: [shangping.value.dataA,shangping.value.dataB,shangping.value.dataC,shangping.value.dataD],
      animationDuration: 2800,
      animationEasing: 'quadraticOut'
    },
    {
      name: '其他反馈',
      smooth: true,
      type: 'line',
      itemStyle: {},
      data: [qita.value.dataA,qita.value.dataB,qita.value.dataC,qita.value.dataD],
      animationDuration: 2800,
      animationEasing: 'quadraticOut'
    },
  ])
}

const getAllApi = async () => {
  await Promise.all([getDianzan(),setVideoData2({'feedbackType':2}),setVideoData3({'feedbackType':3}),setVideoData4({'feedbackType':4})])
  loading.value = false
}

getAllApi()
</script>

<template>
  <PanelGroup />
  <div style="width: 100%;">
    <table class="tab" border="1">
      <tr style="height: 60px;background-color: white">
        <td style="border: 1px solid #E6E6E6;">反馈类型</td>
        <td style="border: 1px solid #E6E6E6;">很好</td>
        <td style="border: 1px solid #E6E6E6;;width: 150px;">好</td>
        <td style="border: 1px solid #E6E6E6;">一般</td>
        <td style="border: 1px solid #E6E6E6;">差</td>
        <td style="border: 1px solid #E6E6E6;">总和</td>
      </tr>
      <tr style="height: 60px;background-color: #F1F1F1">
        <td class="td_table">视频反馈</td>
        <td class="td_table">{{shiping.dataA}}</td>
        <td class="td_table">{{shiping.dataB}}</td>
        <td class="td_table">{{shiping.dataC}}</td>
        <td class="td_table">{{shiping.dataD}}</td>
        <td class="td_table">{{shuju.dataA}}</td>
      </tr>
      <tr style="height: 60px;background-color: #F1F1F1">
        <td class="td_table">商品反馈</td>
        <td class="td_table">{{shangping.dataA}}</td>
        <td class="td_table">{{shangping.dataB}}</td>
        <td class="td_table">{{shangping.dataC}}</td>
        <td class="td_table">{{shangping.dataD}}</td>
        <td class="td_table">{{shuju.dataB}}</td>
      </tr>
      <tr style="height: 60px;background-color: #F1F1F1">
        <td class="td_table">其他反馈</td>
        <td class="td_table">{{qita.dataA}}</td>
        <td class="td_table">{{qita.dataB}}</td>
        <td class="td_table">{{qita.dataC}}</td>
        <td class="td_table">{{qita.dataD}}</td>
        <td class="td_table">{{shuju.dataC}}</td>
      </tr>
    </table>
  </div>
  <div style="clear: both"></div>
  <ElRow :gutter="20" justify="space-between">
    <ElCol :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
      <ElCard shadow="hover" class="mb-20px">
        <ElSkeleton :loading="loading" animated>
          <Echart :options="myOptionData" :height="500"/>
        </ElSkeleton>
      </ElCard>
    </ElCol>
  </ElRow>
</template>

<style lang="less" scoped>
  .td_table{
    border: 1px solid #E6E6E6;
  }
  .xiaxian{
    height: 3px;
    display:block;
    background: #447bf3;
    margin-top: 5px;
  }
  ul li{
    float: right;
    padding: 0px 30px 0px 20px;
  }
  .tab{
    width:100%;
    border:1px solid #E6E6E6;
    text-align: center;
    margin-bottom: 10px;
  }
  .leixing{
    height: 41px;
    text-align: center;
    line-height: 41px;
  }
  .kecheng{
    display: inline-block;
    padding: 10px;
    border: 1px solid #E7E7E7;
  }
  .coursename{
    display: block;
    line-height: 40px;
    padding: 0px 25px 0px 25px;
    text-align: center;
  }
  .look{
    display: block;
    line-height: 40px;
    padding: 0px 25px 0px 25px;
    text-align: center;
    background-color: #F1F1F1;
  }
  .tab{
    width:100%;
  }
  .tab_tr{
    height:80px;
    background-color:#F9FAFC;
    display: inline-block;
    border: 1px solid #E7E7E7;
    margin-bottom: 10px;
  }
  .zt{
    background-color: white;
    height: 50px;
    font:18px/50px "微软雅黑";
    font-weight: bold;
    padding-left: 40px;
    border: 1px solid #E6E6E6;
  }
  .zt2{
    background-color: white;
    height: 50px;
    font:18px/65px "微软雅黑";
    padding-left: 40px;
    margin-bottom: 20px;
  }
</style>
